<template>
	<view>
		<ttBar title="拼团详情" leftIcon="icon-back" :isShare="isShare"></ttBar>
		<view class="cnt" style="padding-top: 100upx;">
			<!-- <view class="cnt" style="padding-top: 100upx;"> </view> -->
			<view class="goodItem">
				<view class="storeBox">
					<text class="iconfont icon-shoucangdianjia"></text>
					<text>{{ goodInfo.store.name }}</text>
				</view>
				<view class="goodBox" @tap="toPage" data-url="groupDetail" :data-id="gpDt.id">
					<image :src="goodInfo.img"></image>
					<view class="infoBox">
						<text class="goodName">{{ goodInfo.name }}</text>
						<view class="priceBox">
							<!-- 	<text>原价</text> -->
							<text class="price">￥{{ goodInfo.price }}</text>
						</view>
						<view>
							<view class="row" v-if="gpDt.level1 && gpDt.level1 == 1">
								<text>{{ gpDt.num1 }}人团返：</text>
								<text class="fanli">￥{{ gpDt.amount1 }}</text>
								<text>/人</text>
							</view>
							<view class="row" v-if="gpDt.level2 && gpDt.level2 == 2">
								<text>{{ gpDt.num2 }}人团返：</text>
								<text class="fanli">￥{{ gpDt.amount2 }}</text>
								<text>/人</text>
							</view>
							<view class="row" v-if="gpDt.level3 && gpDt.level3 == 3">
								<text>{{ gpDt.num3 }}人团返：</text>
								<text class="fanli">￥{{ gpDt.amount3 }}</text>
								<text>/人</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单入口 -->
			<block v-if="isOrderTo">
				<!-- 团长 -->
				<block v-if="rols == 0">
					<!-- 拼团失败 -->
					<block v-if="oldData.status == 2">
						<view class="groupBox">
							<view class="fanliList err">
								<text>很遗憾本次开团未成功</text>
								<text>再接再厉，加油~</text>
								<text class="iconfont icon-shibaibiaoqing"></text>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>
					<!-- 拼团成功 -->
					<block v-if="oldData.status == 1">
						<view class="groupBox">
							<view class="memberBox">
								<block v-if="userList.length > 0">
									<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
								</block>
							</view>
							<view class="fanliList ing">
								<image mode="widthFix" src="@/pagesA/static/icon.png"></image>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>

					<!-- 拼团中 -->
					<block v-if="oldData.status == 0">
						<view class="groupBox">
							<!-- 头像列表 -->
							<view class="memberBox">
								<block v-if="userList.length < 1"><view class="empty">?</view></block>
								<block v-if="userList.length > 0">
									<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
								</block>
							</view>
							<!-- 返利表 -->
							<view class="groupInfo">
								<!-- <view class="head">
									<text>团长奖励预估</text> -->
									<!-- <text class="iconfont icon-question"></text> -->
								<!-- </view> -->
								<view class="fanliList">
									<!-- <view class="row">
										<text>{{ gpDt.num1 }}人</text>
										<text class="fanli">￥{{ gpDt.income1 }}</text>
									</view>
									<view class="row">
										<text>{{ gpDt.num2 }}人</text>
										<text class="fanli">￥{{ gpDt.income2 }}</text>
									</view>
									<view class="row">
										<text>{{ gpDt.num3 }}人</text>
										<text class="fanli">￥{{ gpDt.income3 }}</text>
									</view> -->
									<!-- 倒计时 -->
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>
									
									<button open-type="share">邀请好友一起拼好课</button>
									<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</view>
					</block>
				</block>
				<!-- 非团长 -->
				<block v-if="rols != 0">
					<!-- 拼团失败 -->
					<block v-if="oldData.status == 2">
						<view class="groupBox">
							<view class="fanliList err">
								<text>很遗憾本次开团未成功</text>
								<text>再接再厉，加油~</text>
								<text class="iconfont icon-shibaibiaoqing"></text>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>
					<!-- 拼团成功 -->
					<block v-if="oldData.status == 1">
						<!-- 待开课 已开课 已完成 -->
						<block v-if="orderStatus == 4 || orderStatus == 5 || orderStatus == 9">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length > 0">
										<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<image mode="widthFix" src="@/pagesA/static/icon.png"></image>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 退款中 已退款 代付款 超时关闭-->
						<block v-if="orderStatus == 6 || orderStatus == 7 || orderStatus == 3 || orderStatus == 8">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
					</block>
					<!-- 拼团中 -->
					<block v-if="oldData.status == 0">
						<!-- 代付款  待开课 已开课 已完成 -->
						<block v-if="orderStatus == 3 || orderStatus == 4 || orderStatus == 5 || orderStatus == 9">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length < 1"><view class="empty">?</view></block>
									<block v-if="userList.length > 0">
										<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>

									<button open-type="share">邀请好友一起拼团</button>
									<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 退款中 已退款 已关闭-->
						<block v-if="orderStatus == 6 || orderStatus == 7 || orderStatus == 8">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
					</block>
				</block>
			</block>

			<!-- 分享入口 -->
			<block v-if="!isOrderTo">
				<!-- 拼团失败 -->
				<block v-if="oldData.status == 2">
					<!-- 团长/团员 -->
					<block v-if="rols != 2">
						<view class="groupBox">
							<view class="fanliList err">
								<text>很遗憾本次开团未成功</text>
								<text>再接再厉，加油~</text>
								<text class="iconfont icon-shibaibiaoqing"></text>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>
					<!-- 非参团人员 -->
					<block v-if="rols == 2">
						<view class="groupBox">
							<view class="fanliList ing">
								<text>啊！来迟一步</text>
								<text>该拼团已被其他人捷足先登</text>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>
				</block>

				<!-- 拼团成功 -->
				<block v-if="oldData.status == 1">
					<!-- 团长 -->
					<block v-if="rols == 0">
						<view class="groupBox">
							<view class="memberBox">
								<block v-if="userList.length > 0">
									<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
								</block>
							</view>
							<view class="groupInfo">
								<!-- <view class="head">
									<text>团长奖励预估</text> -->
									<!-- <text class="iconfont icon-question"></text> -->
								<!-- </view> -->
								<view class="fanliList">
									<!-- <view class="row">
										<text>{{ gpDt.num1 }}人</text>
										<text class="fanli">￥{{ gpDt.income1 }}</text>
									</view>
									<view class="row">
										<text>{{ gpDt.num2 }}人</text>
										<text class="fanli">￥{{ gpDt.income2 }}</text>
									</view> -->
								<!-- 	<view class="row">
										<text>{{ gpDt.num3 }}人</text>
										<text class="fanli">￥{{ gpDt.income3 }}</text>
									</view> -->
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</view>
					</block>

					<!-- 团员 -->
					<block v-if="rols == 1">
						<!-- 待付款 -->
						<block v-if="oldData.self.status == 1 || oldData.self.status == 2 || oldData.self.status == 3">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 待开课 已开课 已完成-->
						<block v-if="oldData.self.status == 4 || oldData.self.status == 5 || oldData.self.status == 9">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length > 0">
										<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<image mode="widthFix" src="@/pagesA/static/icon.png"></image>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 退款中 已退款  已关闭-->
						<block v-if="oldData.self.status == 6 || oldData.self.status == 7 || oldData.self.status == 8">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>啊！来迟一步</text>
									<text>该拼团已被其他人捷足先登</text>
									<button @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
					</block>
					<!-- 非团员 -->
					<block v-if="rols == 2">
						<view class="groupBox">
							<view class="fanliList ing">
								<text>啊！来迟一步</text>
								<text>该拼团已被其他人捷足先登</text>
								<button @tap="searchGroup">搜寻好课再次开团</button>
							</view>
						</view>
					</block>
				</block>

				<!-- 拼团中 -->
				<block v-if="oldData.status == 0">
					<!-- 团长 -->
					<block v-if="rols == 0">
						<view class="groupBox">
							<!-- 头像列表 -->
							<view class="memberBox">
								<block v-if="userList.length < 1"><view class="empty">?</view></block>
								<block v-if="userList.length > 0">
									<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
								</block>
							</view>
							<!-- 返利表 -->
							<view class="groupInfo">
								<!-- <view class="head">
									<text>团长奖励预估</text> -->
									<!-- <text class="iconfont icon-question"></text> -->
								<!-- </view> -->
								<view class="fanliList">
								<!-- 	<view class="row">
										<text>{{ gpDt.num1 }}人</text>
										<text class="fanli">￥{{ gpDt.income1 }}</text>
									</view>
									<view class="row">
										<text>{{ gpDt.num2 }}人</text>
										<text class="fanli">￥{{ gpDt.income2 }}</text>
									</view>
									<view class="row">
										<text>{{ gpDt.num3 }}人</text>
										<text class="fanli">￥{{ gpDt.income3 }}</text>
									</view> -->
									<!-- 倒计时 -->
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>
									
									<button open-type="share">邀请好友一起拼好课</button>
									<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</view>
					</block>
					<!-- 团员 -->
					<block v-if="rols == 1">
						<!-- 代付款 与 退款中-->
						<block v-if="oldData.self.status == 1 || oldData.self.status == 2 || oldData.self.status == 3 || oldData.self.status == 6">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length < 1"><view class="empty">?</view></block>
									<block v-if="userList.length > 0">
										<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<text>已集齐{{ userList.length }}人，赶快参与Ta的拼好课吧</text>
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>
									<button @tap="addGroup">立即参团</button>
								</view>
							</view>
						</block>
						<!-- 待开课 已开课 已完成-->
						<block v-if="oldData.self.status == 4 || oldData.self.status == 5 || oldData.self.status == 9">
							<view class="groupBox">
								<view class="memberBox">
									<block v-if="userList.length < 1"><view class="empty">?</view></block>
									<block v-if="userList.length > 0">
										<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
									</block>
								</view>
								<view class="fanliList ing">
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>
									<button open-type="share">邀请好友一起拼团</button>
									<button class="hasBorder" @tap="searchGroup">搜寻好课再次开团</button>
								</view>
							</view>
						</block>
						<!-- 已退款  已关闭-->
						<block v-if="oldData.self.status == 7 || oldData.self.status == 8">
							<view class="groupBox">
								<view class="fanliList ing">
									<text>已集齐{{ userList.length }}人，赶快参与Ta的拼好课吧</text>
									<view class="jishiBox">
										<text>仅剩</text>
										<text class="time">{{ djsText }}</text>
									</view>
									<button @tap="addGroup">立即参团</button>
								</view>
							</view>
						</block>
					</block>
					<!-- 非团员 -->
					<block v-if="rols == 2">
						<view class="groupBox">
							<view class="memberBox">
								<block v-if="userList.length < 1"><view class="empty">?</view></block>
								<block v-if="userList.length > 0">
									<image v-for="(item, index) in userList" :key="index" :src="item.pic ? item.pic : '../../static/userPic.png'"></image>
								</block>
							</view>
							<view class="fanliList ing">
								<text>已集齐{{ userList.length }}人，赶快参与Ta的拼好课吧</text>

								<view class="jishiBox">
									<text>仅剩</text>
									<text class="time">{{ djsText }}</text>
								</view>
								<button @tap="addGroup">立即参团</button>
							</view>
						</view>
					</block>
				</block>
			</block>

			<!-- <view class="groupBox"> -->
				<!-- 未满团 -->
				<!-- <view class="memberBox">
					<image src="../../static/userPic.png"></image>
					<image src="../../static/userPic.png"></image> -->
					<!-- <image src="../../static/userPic.png"></image> -->
					<!-- <view class="empty">?</view>
				</view> -->
				<!-- 非参团 -->
				<!-- <view class="fanliList ing"> -->
					<!-- <text>已集齐{{userList.length}}人，赶快参与Ta的拼好课吧</text> -->
			<!-- 		<view class="jishiBox">
						<text>仅剩</text>
						<text class="time">{{ djsText }}</text>
					</view>
					<button id="toApp" :data-id="gpId" data-url="myGroupDetail" onclick="toApp()">立即参团</button>
				</view>
			</view> -->
		</view>

		<view class="btnOp">
			<text>拼团规则</text>
			<text>最少2人成团,开课前发生退款不退定金</text>
			<text class="iconfont icon-right"></text>
		</view>
		<shareAction ref="shareAction"></shareAction>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import shareAction from '@/pagesA/components/shareAction/shareAction.vue';
export default {
	components: {
		shareAction
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			initInfo: state => state.sys.initInfo,
			locationCity: state => state.map.locationCity
		})
	},
	data() {
		return {
			gpId: 0,
			gpDt: {},
			userList: [],
			goodInfo: {
				store: {
					name: '店铺名称'
				}
			},
			oldData: {},
			djsText: '',
			mastFull: 0,
			rols: 3,
			koulin: '',
			isOrderTo: false,
			orderStatus: 0,
			endT: 0,
			isShare: 0
		};
	},
	methods: {
		getData() {
			this.$store
				.dispatch('apiGetMyGroupDt', {
					userId: this.isLogin ? this.userInfo.userId : 0,
					id: this.gpId,
					page_no: 1,
					page_size: 10
				})
				.then(res => {
					
					this.oldData = res.data.data;
					// #ifdef H5
					let _now = new Date();
					this.endT = _now.getTime() + 30 * 60 * 1000;
					// #endif
					this.goodInfo = res.data.data.courseGroup.course;
					this.gpDt = res.data.data.courseGroup;
					this.userList = res.data.data.userList;
					this.getMastFull();
					this.checkUser();
					setInterval(() => {
						this.daojishi();
					}, 1000);
				});
		},
		daojishi() {
			let _now = new Date();

			let _end = new Date(Date.parse(this.oldData.endTime.replace(/-/g, '/')));
			let _leftTime;

			// #ifdef H5
			_leftTime = this.endT - _now.getTime();
			// #endif

			// #ifndef H5
			_leftTime = _end.getTime() - _now.getTime();
			// #endif

			let _hour = Math.floor(_leftTime / (1000 * 60 * 60));
			let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
			let _sec = Math.floor((_leftTime / 1000) % 60);
			_hour = _hour > 9 ? _hour : '0' + _hour;
			_min = _min > 9 ? _min : '0' + _min;
			_sec = _sec > 9 ? _sec : '0' + _sec;
			this.djsText = _hour + ':' + _min + ':' + _sec;
		},
		// 分享
		share() {
			uni.$emit('showShare', {
				type: 1,
				id: this.gpId
			});
			this.$refs.shareAction.open();
		},
		// 搜团
		searchGroup() {
			this.toPage({
				url: 'groupList'
			});
		},
		// 开团
		addGroup() {
			if (this.isLogin) {
				if (this.oldData.self && this.userInfo.userId == this.oldData.self.userId && (this.oldData.self.status == 3 || this.oldData.self.status == 6)) {
					this.toPage({
						url: 'orderDt',
						id: this.oldData.self.orderNo
					});
				} else {
					let cfmArr = [this.goodInfo];
					uni.setStorage({
						key: 'confirmList',
						data: cfmArr,
						complete: () => {
							this.toPage({
								url: 'confirmOrder',
								isGroup: 2,
								acId: this.oldData.id
							});
						}
					});
				}
			} else {
				this.toPage({
					url: 'login'
				});
			}
		},
		getMastFull() {
			if (this.gpDt.level3 && this.gpDt.level3 == 3) {
				this.mastFull = this.gpDt.num3;
			} else if (this.gpDt.level2 && this.gpDt.level2 == 2) {
				this.mastFull = this.gpDt.num2;
			} else {
				this.mastFull = this.gpDt.num1;
			}
		},
		checkUser() {
			if (this.isLogin) {
				if (this.userInfo.userId == this.oldData.userId) {
					this.rols = 0; //团长
				} else {
					let has = this.userList.some(x => {
						return this.userInfo.userId == x.userId;
					});
					if (has) {
						this.rols = 1; //团员
					} else {
						this.rols = 2; //非团员
					}
				}
			} else {
				this.rols = 2;
			}
		}
	},
	onLoad(cfm) {
		this.gpId = cfm.id;
		this.isShare = cfm.isShare ? parseInt(cfm.isShare) : 0;
		this.getData();
		if (cfm.stay) {
			this.isOrderTo = true;
			this.orderStatus = parseInt(cfm.stay);
		}
		
		// 自动登录
		// 判断能不能获取到本地存储的'token'		
		if (uni.getStorageSync('token')) {	
			this.$store.dispatch("apiUserAutoLogin", {
				token: uni.getStorageSync('token')
			}).then(res => {
				
				setTimeout(() => {
					this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
						setTimeout(() => {
							this.$store.dispatch("timEditInfo", {
								nick: res.data.data.nickname,
								role: 2
							})
						}, 1000)
					})
					let _data={
							userId:res.data.data.userId,
							city:parseInt(this.locationCity.adcode),
							version:'MP'
						};
					this.$store.dispatch("eidtUserInfo",_data)
				}, 500)
			}).catch(res => {
				 
			})
		}
	},
	onShareAppMessage(res) {
		let _href = '';
		if (this.isLogin) {
			_href = 'pagesA/myGroupDetail/myGroupDetail?uid=' + this.userInfo.userId + '&id=' + this.gpId + '&isShare=1';
		} else {
			_href = 'pagesA/myGroupDetail/myGroupDetail?uid=' + this.gpId + '&isShare=1';
		}
		return {
			title: '一起拼好课，最高返1000 ' + this.goodInfo.name,
			path: _href,
			imageUrl: this.goodInfo.img
		};
	},
	onShow() {
		this.getData();
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		this.getData();
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}

.cnt {
	padding: 14upx 18upx;
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	padding-bottom: 98upx;
}

.btnOp {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 98upx;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	font-size: 32upx;
	padding: 0 30upx;

	text:first-child {
		flex-grow: 1;
		color: #202932;
	}

	text:nth-child(2) {
		font-size: 24upx;
		color: #f93d3d;
	}

	.iconfont {
		color: #999999;
	}
}

.groupBox {
	display: flex;
	flex-direction: column;
	padding: 30upx;
	background-color: #ffffff;
	border-radius: 10upx;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);

	.memberBox {
		display: flex;
		padding-bottom: 30upx;
		justify-content: center;

		image {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			margin: 0 8upx;
			flex-shrink: 0;
		}

		.circle {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			background: linear-gradient(to bottom, #f1c66c, #f4ae5d);
			margin: 0 8upx;
			flex-shrink: 0;
		}

		.empty {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			background-color: #fae0df;
			color: #ffffff;
			flex-shrink: 0;
			text-align: center;
			line-height: 80upx;
			font-size: 48upx;
			// font-weight: bold;
		}

		*:first-child {
			margin-left: 0;
		}

		*:last-child {
			margin-right: 0;
		}
	}

	.groupInfo {
		display: flex;
		flex-direction: column;

		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 84upx;
			background-color: #ee3c58;
			border-radius: 8upx;
			color: #ffffff;

			text {
				font-size: 32upx;
			}

			.iconfont {
				margin-top: 6upx;
				font-size: 40upx;
				display: block;
				line-height: 84upx;
				margin-left: 10upx;
			}
		}
	}

	.fanliList {
		display: flex;
		flex-direction: column;
		background-color: #fff9ef;
		border-radius: 7rpx;
		padding: 0 20upx;

		.row {
			display: flex;
			padding: 20upx 0;
			border-bottom: 1px solid #f4ece0;

			text {
				width: 50%;
				text-align: center;
				color: #9e7c6b;
				font-size: 28upx;
			}

			.fanli {
				color: #ee3c58;
				font-weight: bold;
			}
		}

		.row:last-of-type {
			border: none;
		}

		.jishiBox {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
			padding: 30upx 0;
			color: #ee3c58;

			.time {
				height: 40upx;
				line-height: 40upx;
				display: inline-block;
				border-radius: 20upx;
				background-color: #ffffff;
				font-size: 28upx;
				margin-left: 20upx;
				padding: 0 30upx;
			}
		}

		button {
			height: 84upx;
			margin: 30upx 50upx;
			border-radius: 42upx;
			color: #ffffff;
			font-size: 36upx;
			font-weight: bold;
			line-height: 84upx;
			border: none;
			background: linear-gradient(to right, #ff7f2a, #ff5a2a);
		}

		button:after {
			border: none;
			outline: none;
		}
		.hasBorder {
			background: rgba(0, 0, 0, 0);
			border: 1px solid #ff662a;
			color: #ff662a;
		}
	}

	.err {
		align-items: center;
		padding: 67upx 57upx;

		> text {
			font-size: 32upx;
			font-weight: bold;
			color: #9e7c6b;
			margin-bottom: 30upx;
		}

		.iconfont {
			font-size: 180upx;
			font-weight: normal;
			color: #ecdccd;
		}

		button {
			width: 100%;
		}
	}

	.ing {
		align-items: center;
		padding: 67upx 57upx;

		> text {
			font-size: 32upx;
			font-weight: bold;
			color: #9e7c6b;
			margin-bottom: 30upx;
		}

		button {
			width: 100%;
		}

		image {
			width: 70%;
			margin-bottom: 60upx;
		}
	}
}

.goodItem {
	display: flex;
	flex-direction: column;
	padding: 24upx;
	background-color: #ffffff;
	border-radius: 10upx;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	margin-bottom: 20upx;

	.storeBox {
		display: flex;
		align-items: center;
		margin-bottom: 10upx;

		.iconfont {
			font-size: 40upx;
			color: #202932;
			margin-right: 8upx;
			font-weight: normal;
		}

		text {
			font-size: 32upx;
			color: #202932;
			font-weight: bold;
		}
	}

	.goodBox {
		display: flex;

		image {
			width: 240upx;
			height: 240upx;
			border-radius: 10upx;
			margin-right: 10upx;
			flex-shrink: 0;
		}

		.infoBox {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			background-color: #fff9ef;
			padding: 10upx 16upx;
			justify-content: space-between;
		}

		.goodName {
			font-size: 32upx;
			display: block;
			height: 40upx;
			overflow: hidden;
		}

		.priceBox {
			font-size: 30upx;
			color: #202932;
			font-weight: bold;
		}

		.row {
			font-size: 28upx;
			color: #9e7d6b;

			.fanli {
				color: #ff2626;
				font-weight: bold;
			}
		}

		.price {
			font-weight: bold;
			color: #ff2626;
		}
	}
}
</style>
